<!--
 * @Author: 码上talk|RC
 * @Date: 2021-07-03 15:34:12
 * @LastEditTime: 2021-09-28 18:05:51
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-portal/subpackage/default/pages/search/index.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
  <view class="search page--column">
    <view class="s-input">
      <image class="icon" :src="'icon/search.png'|prefixOssUrl" />
      <input
        type="text"
        placeholder="请搜索商品"
        placeholder-style="font-size:30rpx;"
        @input="handleSearchChange"
      />
    </view>
    <view class="col-main s-main">
      <list-page :config="page.config" :form="page.form" :autoLoad="false">
        <template v-slot="{listData}">
          <view class="goods-wrap box-gap">
            <a-goods-card v-for="(goods,i) in listData" :key="i" :goods="goods" type="row"></a-goods-card>
          </view>
        </template>
      </list-page>
    </view>
  </view>
</template>

<script>
import listPage from '@/components/list-page';

export default {
  components: {
    listPage
  },
  data () {
    return {
      page: {
        config: {
          entity: 'Goods',
          action: 'page',
          enablePull: true
        },
        form: {
          query: {
            keyword: ''
          }
        }
      }
    }
  },
  methods: {
    handleSearchChange (e) {
      this.page.form.query.keyword = e.detail.value
    }
  }
}
</script>

<style lang="less" scoped>
.search {
  .s-input {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100rpx;
    padding-bottom: 20rpx;
    background: white;
    .icon {
      width: 35rpx;
      height: 35rpx;
      margin-right: 20rpx;
    }
    input {
      width: 650rpx;
      height: 75rpx;
      padding-left: 20rpx;
      border-radius: 15rpx;
      background-color: #f7f8fa;
    }
  }

  .s-main {
    height: 100vh;
    background-color: #f7f7f7;

    /deep/ .goods-card {
      margin-top: 30rpx;

      &-cover {
        padding: 10rpx;

        image {
          width: 260rpx;
          height: 260rpx;
        }
      }
    }
  }
}
</style>